<template>
    <z-paging>
        <view class="header_box"
            style="background-image: url('https://www.dingxians.cn/upload/20250423/6808a19864eb6.png');">
            <view class="headerback_box">
                <view class="biaoti_box">
                    <view class="left_icon_box" @click="back">
                        <image src="https://www.dingxians.cn/upload/20250324/67e13c80ecef6.png" mode="scaleToFill" />
                    </view>
                    <view class="center_biaoti_box">
                        幸运转盘
                    </view>
                    <view class="left_icon_box">
                        <!-- 占位 -->
                    </view>
                </view>
            </view>
            <view class="lunpan_bg_box"
                style="background-image: url('https://www.dingxians.cn/upload/20250423/6808a2114dc0d.png');">
                <view class="zhizhen_box"
                    style="background-image: url('https://www.dingxians.cn/upload/20250423/6808a2295e9bf.png');"></view>
                <view :animation="animationData" class="canvas-content" id="zhuanpano" style="">
                    <view class="canvas-line">
                        <view class="canvas-litem" v-for="(item, index) in list" :key="index"
                            :style="{ transform: 'rotate(' + (index * width + width / 2) + 'deg)' }"></view>
                    </view>
                    <view class="canvas-list">
                        <view class="canvas-item"
                            :style="{ transform: 'rotate(' + (index * width) + 'deg)', zIndex: index, }"
                            v-for="(iteml, index) in list" :key="index">
                            <view class="canvas-item-text" :style="'transform:rotate(' + (index) + ')'">
                                <image :src="iteml.img" />
                                <text class="b">{{ iteml.name }} * {{ iteml.amount }}</text>
                            </view>
                        </view>


                    </view>
                </view>
            </view>
            <view class="chouBtn_box">
                <view class="dange_img_box" v-for="(item, index) in drawList" :key="index" @click="$no(submit,item)">
                    <image :src="item.img" />
                </view>
            </view>
            <view class="shengyuci_box">
                <view class="left_num">剩余次数：{{ cjNum }}次</view>
                <!-- <view class="right_num">剩余次数：5次</view> -->
            </view>
            <view class="gzsm_box">
                <image src="https://www.dingxians.cn/upload/20250423/6808a19749ffb.png" />
            </view>

            <view class="zjsm_box" @click="rewardBtn">
                <image src="https://www.dingxians.cn/upload/20250423/6808a19749750.png" />
            </view>
        </view>
        <view class="shuoming_box"
            style="background-image: url('https://www.dingxians.cn/upload/20250423/6808a1975701f.png');">
            <scroll-view class="sm_con_txt_box" scroll-y>
                1、幸运转盘分为"普通抽奖"和"高级抽奖"两个模式;
                2、完成每日或每周任务后即可获得参与次数，即可获得
                惊喜手办礼物和大量虎元素。
                3、每日转盘或每周转盘将于每日0点或每周日0点进行刷
                新，未使用次数将会进行重置且不与累计。
                4、本活动玩法禁止用户进行违规操作，提高网络安全意
                识、规则自身行为，违反则进行追究法律责任。
                
            </scroll-view>
        </view>
        <!-- 中奖弹窗 -->
        <uni-popup ref="luckyShow" @close="closeLuck" @open="open" type="center" bgColor="transparent">
            <view @touchmove.stop.prevent="prevent" class="big_bg_box"
                style="background-image: url('https://www.dingxians.cn/upload/20250423/6808a5c0d7a7e.png');">
                <view class="jiangpin_box">
                    <view class="jp_pic_box">
                        <image :src="luckyObj.img"  mode="widthFix"/>
                    </view>
                    <view class="jp_name_box">{{ luckyObj.name }} *{{ luckyObj.amount }}</view>
                </view>
                <view class="kxsx_box" @click="closeLuck">
                    <image src="https://www.dingxians.cn/upload/20250423/6808a5bfaa1d4.png" />
                </view>

            </view>
        </uni-popup>
        <!-- 中奖记录 -->
        <uni-popup ref="recordShow" @close="closeLuck1" @open="rewardBtn" type="bottom" bgColor="transparent">
            <view @touchmove.stop.prevent="prevent" class="zjjl_bg_box"
                style="background-image: url('https://www.dingxians.cn/upload/20250423/6808a5bfb29c7.png');">
                <view class="top_box">
                    <view class="chahao_box"></view>
                    <view class="box_title_box">
                        <image src="https://www.dingxians.cn/upload/20250423/6808a5bfa7fc0.png" />
                    </view>
                    <view class="chahao_box" @click="closeLuck1">
                        <image src="https://www.dingxians.cn/upload/20250423/6808a5bf9f55f.png" />
                    </view>
                </view>
                <scroll-view scroll-y class="reward_con_box">
                    <view class="dange_jl_box"
                        style="background-image: url('https://www.dingxians.cn/upload/20250423/6808a5bf9ea7a.png');"
                        v-for="(item, index) in rewordList" :key="index">
                        <view class="dange_pic_box">
                            <image :src="item.img" mode="widthFix" />
                        </view>
                        <view class="luckNume_box">{{ item.name }} * {{ item.amount }}</view>
                        <view class="luckTime_box">{{item.created_at}}</view>
                    </view>
                </scroll-view>
            </view>
        </uni-popup>
    </z-paging>
</template>

<script>
// import backSty from '../components/backSty.vue'
import api from '../../api/index.js'
export default {
    components: {
        // backSty
    },
    data() {
        return {
            noClick:true,//节流
            cjNum: '',//抽奖次数
            rewordList:[],//抽奖记录
            list: [
                {
                    "name": "再来1次",
                    "value": "再来1次",
                    img: 'https://www.dingxians.cn/upload/20250423/6808a6a0ad1f9.png',
                },
                {
                    "name": "虎元素*10",
                    "value": "虎元素*10",
                    img: 'https://www.dingxians.cn/upload/20250423/6808a6a0ad1f9.png',
                },
                {
                    "name": "盲盒*1",
                    "value": "盲盒*1",
                    img: 'https://www.dingxians.cn/upload/20250423/6808a6a0ad1f9.png',
                },
                {
                    "name": "再来1次",
                    "value": "再来1次",
                    img: 'https://www.dingxians.cn/upload/20250423/6808a6a0ad1f9.png',
                },
                {
                    "name": "虎元素*100",
                    "value": "虎元素*100",
                    img: 'https://www.dingxians.cn/upload/20250423/6808a6a0ad1f9.png',
                },
                {
                    "name": "再来一次",
                    "value": "再来一次",
                    img: 'https://www.dingxians.cn/upload/20250423/6808a6a0ad1f9.png',
                },
                {
                    "name": "虎元素*100",
                    "value": "虎元素*100",
                    img: 'https://www.dingxians.cn/upload/20250423/6808a6a0ad1f9.png',
                },
                {
                    "name": "盲盒*1",
                    "value": "盲盒*1",
                    img: 'https://www.dingxians.cn/upload/20250423/6808a6a0ad1f9.png',
                }
            ],
            luckyObj: {},//奖品
            width: 0,
            animationData: {},
            btnDisabled: '',
            flag: true,//防抖
            drawList: [
                {
                    id: 1,
                    img: 'https://www.dingxians.cn/upload/20250423/6808a1975416c.png'
                },
                {
                    id: 2,
                    img: 'https://www.dingxians.cn/upload/20250423/6808a1974d866.png'
                },
            ]
        }
    },
    onLoad() {
        // 获取奖品列表
        this.width = 360 / this.list.length
    },
    onShow() {
        this.getzpList()
    },
    methods: {
        animation(index, duration) {
            //中奖index
            var list = this.list;
            // var awardIndex = 1 || Math.round(Math.random() * (awardsNum.length - 1)); //随机数
            var runNum = 4; //旋转8周

            // 旋转角度
            this.runDeg = this.runDeg || 0;
            this.runDeg = this.runDeg + (360 - this.runDeg % 360) + (360 * runNum - index * (360 / list.length)) + 1
            //创建动画
            var animationRun = uni.createAnimation({
                duration: duration,
                timingFunction: 'ease'
            })
            animationRun.rotate(this.runDeg).step();
            this.animationData = animationRun.export();
            this.btnDisabled = 'disabled';
        },
        submit(item) {
            if (item.id == 2) {
                this.show('敬请期待！')
            } else {
                this.playReward()
            }
        },
        closeLuck() {
            this.$refs.luckyShow.close()
            this.flag = true
        },
        //发起抽奖
        playReward(index) {
            api.blindBox
                .luckTurntables_raw()
                .then((res) => {
                    if (res.code == 200) {
                        if (this.flag) {
                            this.getzpList()
                            this.flag = false
                            let duration = 4000
                            this.animation(res.data.id - 1, duration)
                            this.luckyObj = res.data
                            setTimeout(()=>{
                                this.$refs.luckyShow.open()
                            },4000)
                            
                            this.btnDisabled = '';
                        }
                    } else {
                        this.show(res.msg)
                    }
                })
        },

        getzpList() {
            api.blindBox
                .luckTurntables()
                .then((res) => {
                    this.list = res.data.data.reverse()
                    this.cjNum = res.data.day_turnplate_num
                })
        },
        // 打开中奖记录弹窗
        rewardBtn() {
            api.blindBox
                .luckTurntablesRecords()
                .then((res) => {
                    if (res.code == 200) {
                        this.rewordList = res.data.data
                        this.$refs.recordShow.open()
                    }
                })

        },
        // 关闭中奖记录弹窗
        closeLuck1() {
            this.$refs.recordShow.close()
        },
        back() {
            uni.navigateBack({ delta: 1 })
        }

    }
}
</script>

<style lang="scss" scoped>
/deep/.zp-scroll-view-absolute {
    background-color: #040616;
}

.header_box {
    width: 100%;
    height: 1260rpx;
    background-size: 100% 100%;
    position: relative;

    .headerback_box {
        width: 750rpx;
        height: 180rpx;
        box-sizing: border-box;
        padding-top: 92rpx;
        // margin-bottom: 218rpx;

        .biaoti_box {
            width: 100%;
            height: 88rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20rpx;

            .left_icon_box {
                width: 80rpx;
                height: 80rpx;

                image {
                    width: 100%;
                    height: 100%;
                }
            }

            .center_biaoti_box {
                width: 380rpx;
                height: 88rpx;
                line-height: 88rpx;
                text-align: center;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                font-size: 40rpx;
                color: #fff;
                font-weight: 900;
            }
        }
    }

    .zjsm_box {
        width: 122rpx;
        height: 120rpx;
        position: absolute;
        right: 21rpx;
        z-index: 10;
        bottom: 495rpx;

        image {
            width: 100%;
            height: 100%;
        }
    }

    .lunpan_bg_box {
        width: 600rpx;
        height: 600rpx;
        position: relative;
        margin: auto;
        margin-bottom: 190rpx;
        background-size: 100% 100%;

        .zhizhen_box {
            width: 140rpx;
            height: 325rpx;
            background-size: 100% 100%;
            position: absolute;
            top: 45rpx;
            left: 0;
            right: 0;
            margin: auto;
        }




        .canvas-content {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
            display: block;
            width: 600rpx;
            height: 600rpx;
            border-radius: inherit;
            /* background-clip: padding-box; */
            /* background-color: #ffcb3f; */
        }

        .canvas-list {
            position: absolute;
            left: 0;
            top: 0;
            width: inherit;
            height: inherit;
            z-index: 9999;
        }

        .canvas-item {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            color: #e4370e;
            // background-color: pink;
            // text-shadow: 0 1rpx 1rpx rgba(255, 255, 255, 0.6);
        }

        .canvas-item-text {
            position: relative;
            display: block;
            padding-top: 68rpx;
            margin: 0 auto;
            text-align: center;
            -webkit-transform-origin: 50% 300rpx;
            transform-origin: 50% 300rpx;
            display: flex;
            // overflow: hidden;
            flex-direction: column;
            align-items: center;
            color: #FB778B;
        }

        .canvas-item-text text {
            height: 19rpx;
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 20rpx;
            color: #F6F4FF;
            line-height: 18rpx;
        }

        .canvas-item-text image {
            width: 80rpx;
            height: 80rpx;
            margin-bottom: 17rpx;
        }


        /* 分隔线 */
        .canvas-line {
            position: absolute;
            left: 0;
            top: 0;
            width: inherit;
            height: inherit;
            z-index: 99;
        }

        .canvas-litem {
            position: absolute;
            left: 300rpx;
            top: 0;
            width: 3rpx;
            height: 230rpx;
            background-color: #000000;
            opacity: .6;
            overflow: hidden;
            -webkit-transform-origin: 50% 300rpx;
            transform-origin: 50% 300rpx;
        }


    }

    .chouBtn_box {
        width: 100%;
        height: 107rpx;
        box-sizing: border-box;
        padding: 0 30rpx;
        display: flex;
        justify-content: space-between;
        margin-bottom: 31rpx;

        .dange_img_box {
            width: 330rpx;
            height: 107rpx;

            image {
                width: 100%;
                height: 100%;
            }
        }
    }

    .shengyuci_box {
        width: 100%;
        height: 23rpx;
        box-sizing: border-box;
        padding: 0 30rpx;
        display: flex;
        justify-content: space-between;
        margin-bottom: 36rpx;

        .right_num,
        .left_num {
            width: 330rpx;
            height: 23rpx;
            font-family: test1;
            font-weight: bold;
            font-size: 24rpx;
            color: #F6F4FF;
            line-height: 23rpx;
            text-align: center;
        }
    }

    .gzsm_box {
        width: 271rpx;
        height: 68rpx;
        margin: auto;

        image {
            width: 100%;
            height: 100%;
        }
    }
}

.shuoming_box {
    width: 671rpx;
    height: 464rpx;
    margin: auto;
    background-size: 100% 100%;
    margin-bottom: 100rpx;
    box-sizing: border-box;
    padding: 47rpx 30rpx 30rpx 30rpx;

    .sm_con_txt_box {
        width: 609rpx;
        height: 384rpx;
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #FFFFFF;
        line-height: 60rpx;
    }
}

// 弹窗
.big_bg_box {
    width: 520rpx;
    height: 628rpx;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding-top: 156rpx;

    .jiangpin_box {
        width: 300rpx;
        height: 300rpx;
        background: #051341;
        border-radius: 10rpx;
        // opacity: 0.5;
        margin: auto;
        margin-bottom: 30rpx;
        box-sizing: border-box;
        padding-top: 31rpx;

        .jp_pic_box {
            margin: auto;
            margin-bottom: 39rpx;
            width: 143rpx;
            height: 161rpx;

            image {
                width: 143rpx;
                height: 161rpx;
            }
        }

        .jp_name_box {
            width: 100%;
            height: 23rpx;
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 24rpx;
            color: #11EAFD;
            line-height: 23rpx;
            text-align: center;
        }
    }

    .kxsx_box {
        width: 300rpx;
        height: 97rpx;
        margin: auto;

        image {
            width: 100%;
            height: 100%;
        }
    }
}

.zjjl_bg_box {
    width: 100%;
    height: 1000rpx;
    background-size: 100% 100%;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
    box-sizing: border-box;
    padding-top: 25rpx;

    .top_box {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        padding: 0 52rpx;
        margin-bottom: 23rpx;

        .box_title_box {
            width: 245rpx;
            height: 80rpx;

            image {
                width: 100%;
                height: 100%;
            }
        }

        .chahao_box {
            width: 31rpx;
            height: 32rpx;

            image {
                width: 100%;
                height: 100%;
            }
        }
    }

    .reward_con_box {
        width: 100%;
        height: 870rpx;

        .dange_jl_box {
            width: 100%;
            height: 100rpx;
            background-size: 100% 100%;
            display: flex;
            justify-content: space-between;
            box-sizing: border-box;
            padding: 0 32rpx;
            align-items: center;
            margin-bottom: 33rpx;

            .dange_pic_box {
                width: 70rpx;

                image {
                    width: 100%;
                }
            }
        }

        .luckNume_box {
            height: 31rpx;
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 32rpx;
            color: #F6F4FF;
            line-height: 31rpx;
        }

        .luckTime_box {
            height: 26rpx;
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 28rpx;
            color: #F6F4FF;
            line-height: 26rpx;
            text-align: right
        }
    }
}
</style>